<template>
	<view class="card" @click="clickCheck">
		<view class="title">
			<view class="left">
				<view >{{myInfo.title}}</view>
				<view class="point" v-if="myInfo.type === 'system' && !myInfo.state ">
				</view>
				<view class="confirm" v-if="myInfo.type !== 'system' && myInfo.state">
					已确认
				</view>
				<view class="confirm color" v-if="myInfo.type !== 'system' && !myInfo.state">
					待确认
				</view>
			</view>
			<view class="time">
				{{myInfo.created_at | timeFormat('MM-DD')}}
			</view>
		</view>
		<view class="center">
			{{ myInfo.content}}
		</view>
	</view>
</template>

<script>
	export default {
		name:"XbdMsgCard",
		props: {
			myInfo: '',
		},
		data() {
			return {
			}
		},
		methods:{
			clickCheck(){
				if(this.myInfo.type === 'risk'){
					
					uni.navigateTo({
					  url: `/pages/personalcenter/myMsg/details?id=${this.myInfo._id}`,
					});
				}else if(this.myInfo.type === 'duty'){
					uni.navigateTo({
					  url: `/pages/personalcenter/myMsg/detailstwo?id=${this.myInfo._id}`,
					});
				}
			}
		},
		computed:{
			title(){
				let til = ''
				if (this.myInfo.type ==='system'){
					return til = '系统消息'
				}else if(this.myInfo.type ==='risk'){
					return til = '风险预警通知'
				}else {
					return til ='值班提醒通知'
				}
				return til
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card{
		padding: 40rpx 0;
		width: 100%;
		font-size: 24rpx;
		color:#8890A5;
		border-bottom: 2rpx solid #EBEEF5;
		.title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			margin-bottom: 20rpx;
			.point{
				width: 16rpx;
				height: 16rpx;
				background: #fc4f4f;
				border-radius: 50%;
			}
			
			.left{
				font-size: 30rpx;
				display: flex;
				color: #000623;
					
				.confirm{
					margin-left: 30rpx;
					padding: 3rpx 6rpx;
					color: #FFFFFF;
					font-size: 22rpx;
					background-color: #48BC7C;
					border-radius:4rpx;
					&.color {
						background-color: #FCB94F !important;

					}
				}
			}
		}
		.center{
			overflow: hidden;
			    white-space: nowrap;
			    text-overflow: ellipsis;
		}
	}
</style>